<template>
	<view class="form_page">
		<view class="head">
			<image src="/static/image/back.png" @click="handleBack" />
			<view class="title_text">监理工程师通知单</view>
			<view class="blank"></view>
		</view>
		
		<scroll-view scroll-y class="scroll">
			<form @submit="formSubmit" @reset="formReset">
				<view class="form_item">
					<view class="title_text">工程项目名称</view>
					<view class="my-input">
						<input v-model="noticeForm.projectName" class="uni-input"
							name="projectName" />
					</view>
				</view>
				<view class="form_item">
					<view class="title_text">编号</view>
					<view class="my-input">
						<input v-model="noticeForm.documentNumber" class="uni-input"
							name="documentNumber" />
					</view>
				</view>
				<view class="form_item">
					<view class="title_text">施工单位</view>
					<view class="my-input">
						<input v-model="noticeForm.constructionUnit" class="uni-input"
							name="constructionUnit" />
					</view>
				</view>
				<view class="form_item">
					<view class="title_text">事由</view>
					<view class="my-textarea">
						<textarea v-model="noticeForm.reason"
							name="reason" />
					</view>
				</view>
				<view class="form_item">
					<view class="title_text">通知内容</view>
					<view class="my-textarea">
						<textarea v-model="noticeForm.notificationContent" name="notificationContent" />
					</view>
				</view>
				<view class="form_item">
					<view class="title_text">签名</view>
					<view class="modal-content-area">
						<view class="modal-content">
							<view class="toast" @click="clearCanvas">
								<image src="/static/image/reset.png" mode="" />
								清空重签
							</view>
							<canvas canvas-id="signature" class="modal-canvas" :disable-scroll="true" id="writeCanvas"
								@touchstart="scaleStart" @touchmove="scaleMove" @touchend="scaleEnd"></canvas>
						</view>
					</view>
					<button class="save"  @click="handleNext">保存签名</button>
				</view>
<!-- 				<view class="form_item">
					<view class="title_text">监理工程师</view>
					<view class="my-textarea">
						<textarea v-model="noticeForm.supervisionEngineer" name="supervisionEngineer" />
					</view>
				</view>
				<view class="form_item">
					<view class="title_text">收件人</view>
					<view class="my-textarea">
						<textarea v-model="noticeForm.recipient" name="recipient" />
					</view>
				</view> -->
				<image class="signFile" :src="signFile" mode=""></image>
				<view class="btn">
					<button class="cancel" type="primary" @click="handleBack">退出</button>
					<button form-type="submit" class="confirm" type="primary">确认发送</button>
				</view>
			</form>
		</scroll-view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	
	export default {
		data() {
			return {
				hideModal: false,
				hasDraw: false,
				canvasName: '#writeCanvas',
				ctx: '',
				canvasWidth: 0,
				canvasHeight: 0,
				startPoint: {
					x: 0,
					y: 0,
				},
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 1, // 笔记倍数
				radius: 2, //画圆的半径
				noticeForm:{
					projectName:'',
					documentNumber:'',
					constructionUnit:'',
					reason:'',
					notificationContent:'',
					supervisionUrl:''
				},
				signFile: ''
			}
		},
		onShow() {
			this.hideModal = false
			let that = this
			let query = uni.createSelectorQuery().in(this);
			//获取自定义组件的SelectQuery对象
			this.canvasCtx = uni.createCanvasContext('signature', that)
			// 设置线的样式
			this.canvasCtx.setLineCap("round");
			this.canvasCtx.setLineJoin("round");
			// 初始化颜色
			this.canvasCtx.setStrokeStyle(that.selectColor);
			// 初始化粗细
			query.select('.modal-canvas')?.boundingClientRect(rect => {
				this.canvasWidth = rect?.width
				this.canvasHeight = rect?.height
			}).exec();
		},
		methods: {
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			formSubmit(e) {
				const notice = e.detail.value
				console.log(notice, 'formSubmit');
				for(let key in notice){
					if(!notice[key]){
						uni.showToast({
							icon: 'none',
							title: '请填写完整数据',
							duration: 2000
						});
						return
					}
				}
				if(!this.noticeForm.supervisionUrl){
					uni.showToast({
						icon: 'none',
						title: '请保存签名后提交',
						duration: 2000
					});
					return
				}
				request(`/person/notify/saveNotification`, {
					method: 'POST',
					data: this.noticeForm
				}).then((res) => {
					console.log(res.data, 'saveNotification');
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '新增成功',
							duration: 2000
						});
					}
				})
			},
			handleNext() {
				let {
					hasDraw,
				} = this
				if (!hasDraw) {
					uni.showToast({
						title: '您还未签名！',
						icon: 'none',
						mask: true
					})
					return
				} else {
					this.saveToImage();
				}
			},
			scaleStart(event) {
				console.log(event, 'scaleStart');
				if (event.type != 'touchstart') return false;
				let currentPoint = {
					x: event.touches[0].x,
					y: event.touches[0].y
				}
				// this.ctx.moveTo(currentPoint.x, currentPoint.y)
				this.drawCircle(currentPoint);
				this.startPoint = currentPoint
				this.hasDraw = true
			},
			scaleEnd(e) {
				this.isStart = true
			},
			scaleMove(event) {
				if (event.type != "touchmove") return false;
				let {
					startPoint
				} = this
				let currentPoint = {
					x: event.touches[0].x,
					y: event.touches[0].y
				}
			
				this.drawLine(startPoint, currentPoint)
				this.startPoint = currentPoint
			},
			drawCircle(point) { //这里负责点
				let ctx = this.canvasCtx;
				ctx.beginPath();
				ctx.setFillStyle(this.lineColor)
				//笔迹粗细由圆的大小决定
				ctx.arc(point.x, point.y, this.radius, 0, 2 * Math.PI);
				ctx.fill();
				ctx.closePath();
				ctx.draw(true)
			},
			drawLine(sourcePoint, targetPoint) {
				let ctx = this.canvasCtx;
				this.drawCircle(targetPoint);
				ctx.beginPath();
				ctx.setStrokeStyle(this.lineColor)
				ctx.setLineWidth(this.radius * 2)
				ctx.moveTo(sourcePoint.x, sourcePoint.y);
				ctx.lineTo(targetPoint.x, targetPoint.y);
				ctx.stroke();
				ctx.closePath();
			},
			clearCanvas() {
				//清空画布
				let ctx = this.canvasCtx;
				ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
				ctx.fillStyle = 'rgba(0, 0, 0, .1)';
				ctx.draw()
				this.hasDraw = false
			},
			saveToImage() {
				let that = this;
				let {
					canvasHeight,
					canvasWidth
				} = that
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.canvasWidth,
					height: this.canvasHeight,
					canvasId: 'signature',
					success(res) {
						if (res.tempFilePath) {
							console.log(res.tempFilePath, 'res.tempFilePath');
							// that.triggerEvent('saveToImageEvent', res.tempFilePath)
							let filePath = res.tempFilePath
							 uni.getFileSystemManager().readFile({
								filePath: filePath, //选择图片返回的相对路径
								encoding: 'base64', //编码格式
								success: res => {
								  console.log('data:image/png;base64,' + res.data)
								  that.signFile = 'data:image/png;base64,' + res.data
								 //  request(`/sms/singleAuthenticate`,{
									// method:'POST',
									// data:{
									//   base64Data: res.data,
									// } 
								 //  }).then(((res: any)=>{
									// console.log(res.data,'res');
									// if(res.data.code==1){
									//   that.setData({
									// 	authStatus:2
									//   })
									//   that.initStatus()
									// }else{
									//   uni.showToast({
									// 	title: res.data.msg,
									// 	icon: 'none',
									// 	duration: 2000
									//   })
									// }
								 //  }))
								}
							  })
						}
					},
					fail(err) {
						console.log(err);
					}
				}, that)
			},
		}
	}
</script>

<style lang="scss">
	@import "@/style/formPage.scss";
	.scroll {
		height: 85vh;
		margin-top: 30rpx;
		// background-color: #74fdff;
	}
	.modal-content-area {
		z-index: 5;
		width: 85%;
		height: 300rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background: #305397;
		position: relative;
		.toast {
			position: absolute;
			bottom: 5%;
			right: 5%;
			display: flex;
			align-items: cen;
			transform: rotate(-50%, -50%);
			z-index: 100;
			font-size: 20rpx;
			line-height: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);
		
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.modal-content {
			width: 100%;
			height: 300rpx;
			border-radius: 20rpx;
			background: #bd3131;
		}
		
		.modal-canvas {
			width: 100%;
			display: block;
			border-radius: 20rpx;
			height: 300rpx;
			background: #F5F7FB !important;
			border: 1rpx solid rgba(0, 0, 0, 0.08);
			z-index: 1;
		}
	}
	.save{
		width: 30%;
		margin: 0;
		margin-top: 30rpx;
		// background-color: #9ee2ff;
	}
	.signFile{
		width: 200rpx;
		height: 200rpx;
		background-color: #aee0ff;
	}
</style>